<template>
<div>
  <el-row>
    <el-col :span="16">
      <el-input v-model="this.searchTag" placeholder="input tag" size="small" />
    </el-col>
    <el-col :span="8">
      <el-button :icon="Search" size="small" @click="searchTags()">Search</el-button>
    </el-col>
  </el-row>
  <br>
  <el-row>
    <el-col :span="8">
      <el-button @click="selectMode" size="small">选择标签</el-button>
    </el-col>
    <el-col :span="8">
      <el-button @click="addTagMode" size="small">添加标签</el-button>
    </el-col>
    <el-col :span="8">
      <el-button @click="reLoadTag" size="small">重新加载</el-button>
    </el-col>
  </el-row>
  <el-row class="tags-menu">
    <div class="el-scrollbar sidebar menu-scr" >
        <el-scrollbar height="1000px">
          <el-menu
              :default-active="$route.path"
              v-infinite-scroll="loadTags"
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo infinite-list"
              text-color="#fff"
              router>
            <!--@open="handleOpen"-->
            <!--@close="handleClose"-->
            <el-menu-item
                index="#"
                @click="clickTag(tag.name, tag.cnName, tag.id)"
                v-for="tag in tags_data"
                class="infinite-list-item"
                style="height: 32px"
                :key="tag.id">
              <!--                  <i class="el-icon-menu">{{tag.imgCount}}</i>-->
              <span class="tag_name_txt">{{tag.name}}({{tag.cnName}})</span>
            </el-menu-item>

          </el-menu>
        </el-scrollbar>
      </div>
  </el-row>
</div>
</template>

<script>
import axios from "axios";
import { Search } from '@element-plus/icons-vue';
import {useRoute} from 'vue-router';
import {inject} from 'vue'
export default {
  name: "LeftMenu",
  props:{
    tag_content: String,
    tag_id: String,
  },
  data() {
    return{
      searchTag: "",
      tags_data: [],
      tagPage:1,
      tagSept:20,
      myBaseURL: inject('$baseURL'),
      Search: Search.default,
      mode: -1,
      add_tags: []
    }
  },
  methods:{
    searchTags: async function () {
              //http://localhost:8090/tag/search?tagName=bra
              let re_data;
              await axios({
                method: 'get',
                url: '/search/tag',
                baseURL: this.myBaseURL,
                params: {
                  tagName: this.searchTag,
                }
      }).then(response => {
        let res = response.data
        this.tags_data = res
        this.searchTag = ""
        re_data = res
      })
      return re_data
    },
    loadTags: function () {
      //console.log("执行了loadTags")
      let re_data;
      axios({
        method: 'get',
        url: '/source/getTagList',
        baseURL: this.myBaseURL,
        //responseType:'json',
        params: {
          page: this.tagPage+1,
          step: this.tagSept,
        }
      }).then(res=>{
        //console.log("请求新 tag 成功！")
        //console.log(res.data)
        this.tagPage = this.tagPage+1
        re_data = res.data
        this.tags_data.push(...re_data)
        //console.log(this.tags_data)
      })
    },
    toThisTagPage: function (tag_name, tag_cnName, tag_id){
      //console.log("执行选择tag")
      //console.log(tag_name)
      //将次tag name 传递给父组件
      //this.$emit("select_tag",tag_name);
      this.$emit("select_tag", [tag_name,tag_cnName, tag_id]);
      this.$router.push({path: '/TagImgs',query:{ tag: tag_name, page: 1}} )
      //this.routerRefresh();
    },
    addThisTag: function (tag_name, tag_cnName, tag_id){
      //console.log("执行添加tag")
      //console.log(tag_name)
      //将次tag name 传递给父组件
      this.$emit("get_new_tag", [tag_name,tag_cnName,tag_id]);
      this.$router.push({path: '/TagImgs',query:{ tag: tag_name, page: 1}} )
    },
    clickTag:function (tag_name, tag_cnName, tag_id){
      if(this.mode === -1)
      {
        this.toThisTagPage(tag_name, tag_cnName, tag_id)
      }
      else if(this.mode === 1)
      {
        this.addThisTag(tag_name, tag_cnName, tag_id)
      }
    },
    getTagsImgInfo :async function (page,sept){
      let re_data;
      await axios({
        method:'get',
        url:'/source/getTagList',
        baseURL:this.myBaseURL,
        //responseType:'json',
        params:{
          page: page,
          step: sept,
        }
      }).then(response => {
        re_data = response.data
      })
      return re_data
    },
    reMode:function (){
      this.mode = this.mode * (-1)
      //console.log("改变当前模式")
    },
    addTagMode:function (){
      this.mode = 1
    },
    selectMode:function (){
      this.mode = -1
    },
    reLoadTag:function (){
      this.tagPage = 1
      //this.loadTags();
      this.getTagsImgInfo(this.tagPage,this.tagSept).then(res=>{
        // console.log(res)
        this.tags_data = res
      })
      this.loadTags();
      this.loadTags();
      this.loadTags();
      this.loadTags();
      this.loadTags();
    }
  },
  mounted() {
    this.getTagsImgInfo(this.tagPage,this.tagSept).then(res=>{
      // console.log(res)
      this.tags_data = res
    })
  },
  setup(){
    const route = useRoute() //获取到值
    //console.log("执行了setup函数")
    let query = route.query;
    return {
      query
    }
  }
}
</script>

<style scoped>
.tags-menu{
  padding-top: 20px;
}
.menu-scr{
  height: 1000px;
  width: 100%;
}
.tag_name_txt{
  color: lightpink;
}
.button_select{
  color: lightpink;
}
</style>
